<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>头像修改-IT先锋</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">

<!--    <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/>-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/layui.css}">

</head>

<body style="background: #f2f2f2;">

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
    <div class="row">
        <div th:replace="~{user/index::userShowPanel}"></div>
        <div class="col-md-9 blog-main">
            <div class="">
                <!--       修改个人信息：头像     -->
                <div class="layui-col-md10 xuanzeqiYincang" id="messageP2">
                    <div class="marginPanel">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md6" >
                                <div class="layui-panel" style="text-align: center">

                                    <p style="font-size: 25px;font-weight: bolder;font-family: serif;margin: 5px">
                                        请上传你的头像</p>

                                    <!--自动封装了一个name为file的参数对应上传的图片-->
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="updateImg">上传图片</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="avatar" style="width: 200px;height: 200px">
                                            <p id="demoText"></p>
                                        </div>
                                        <div style="width: 95px;margin-left: 44%">
                                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                                <div class="layui-progress-bar" lay-percent=""></div>
                                            </div>
                                        </div>
                                    </div>

                                    <p style="font-size: 15px;font-weight: lighter;font-family: serif;margin: 3px">
                                        图片的大小限制为500KB</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>



<div th:replace="~{common/footer::footer}"></div>
<a class="to-top">返回顶部</a>

<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--<script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script>-->
<script th:src="@{/js/layui.js}" ></script>
<!-- layer 赞赏码 -->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<!--头像上传的引用-->
<script th:inline="javascript">
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#updateImg'
            ,url: '/uploadImage' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,size: 1024*5 //大小限制为5M
            ,acceptMime: 'image/*'//规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#avatar').attr('src', result); //图片链接    （base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code = 20001){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#demoText').html(''); //置空上传失败的状态

                // 刷新页面
                location.reload();
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });});
</script>


<!--<script>-->
<!--    // 后台读取-->
<!--    function donate(){-->
<!--        axios.get('/user/donate/1').then(response => {-->
<!--            console.log();-->
<!--            layer.photos({-->
<!--                photos: response.data,-->
<!--                anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）-->
<!--            });-->
<!--        })-->
<!--    }-->
<!--</script>-->

</body>
</html>
